<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/home.css">
    <link rel="stylesheet" href="../static/css/top.css">
    <link rel="shortcut icon" href="../static/images/cup.ico">
</head>

<body>
    <!-- 具体样式 -->
    <div class="container">
        <div class="row">
            <div class="col-sm"></div>
            <div class="col-sm">
                <div class="card" style="width: 50rem; background:rgba(246, 246, 247, 0.295);">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                    data-target="#saysomething">发表说说</button>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <h4>当前用户：{{username}}</h4>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-end"><button type="button"
                                    class="btn btn-secondary btn-lg" data-toggle="modal"
                                    data-target="#sign-up">注销</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm"></div>
        </div>
        <div class="row">
            <div class="col-sm">
            </div>
            <div class="col-sm" id="saysaymsg">
                {% for msg in msgs %}
                <div class="card border-primary shadow" style="width: 50rem; background:rgba(232, 232, 2410, 0.3)">
                    <div class="card-header">
                        <div class="row">
                            <div class="media">
                                <img src="../static/images/64.jpg" class="align-self-start mr-3" alt="好像图片加载不出来噢">
                                <div class="media-body">
                                    <h5 class="mt-0">{{msg.msgUserName}}</h5>
                                    <p class="msgCon">{{msg.content}}</p>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#comment"
                            onclick="sayComment('{{msg.id}}')">评论</button>
                        <img src="../static/images/alarm.svg" alt="time:">
                        <cite title="Source Title">{{msg.createtime}}</cite>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="{{msg.id}}">
                            {% for comment in msg.comments %}
                            <div class="media list-group-item" style="background: rgba(240, 227, 240, 0.2);">
                                <div class="media-body">
                                    <h5 class="mt-0">{{comment.comUserName}}：</h5>
                                    <p class="msgCon">{{comment.content}}</p>
                                </div>
                                <footer class="blockquote-footer" style="color: #212529; float: right;">
                                    <cite title="Source Title">{{comment.createtime}}</cite>
                                </footer>
                            </div>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="col-sm">
            </div>
        </div>
        <div class="loadMore">
            <p onclick="more()">加载更多</p>
        </div>
    </div>

    <!-- 发表说说  -->
    <div class="modal fade" id="saysomething" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="input-group">
                            <textarea class="form-control" aria-label="With textarea" placeholder="说点什么吧"
                                onfocus="this.placeholder=''" onblur="this.placeholder='说点什么吧'" id="sayMsg"
                                name="sayMsg"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        onclick="cancelSay()">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="say()">发表</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论一下 -->
    <div class="modal fade" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">评论</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="input-group">
                            <textarea class="form-control" aria-label="With textarea" placeholder="评论"
                                onfocus="this.placeholder=''" onblur="this.placeholder='评论'" id="commentMsg"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        onclick="cancelCom()">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="comment()">发表</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 是否确认注销 -->
    <div class="modal" tabindex="-1" id="sign-up">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确定注销？</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>呜呜呜，我会很想你的</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">算了</button>
                    <button type="button" class="btn btn-primary" onclick="logout()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 回到顶部 -->
    <div class="actGotop"><a href="javascript:;" title="返回顶部"></a></div>

    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="../static/js/canvas-nest.min.js" color="255,255,255" opacity='0.7' zIndex="-2" count="200"></script>

    <!-- 运行逻辑 -->
    <script>
        // 加载更多
        let page = 1;
        function more() {
            axios({
                method: 'get',
                url: `/more?Page=${++page}`
            }).then(function (response) {
                // 接收返回的数据
                if (response.data) {
                    $('#saysaymsg').append(response.data);
                }
                else {
                    alert('没有更多的说说')
                }
            }).catch((err) => {
                alert(`出现异常：${err}`);
            });
        }

        // 回到顶部
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() >= 100) {
                    $('.actGotop').fadeIn(300);
                } else {
                    $('.actGotop').fadeOut(300);
                }
            });
            $('.actGotop').click(function () {
                $('html,body').animate({ scrollTop: '0px' }, 800);
            });
        });

        function setFocus() {
            // 点击文字获得焦点
            document.getElementById('sayMsg').focus();
            document.getElementById('commentMsg').focus();
        }

        // 取消发布
        function cancelSay() {
            $('#sayMsg').val('');
        }

        // 取消评论
        function cancelCom() {
            $('#commentMsg').val('');
        }

        // 确认注销
        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {
                // 接收返回的数据
                let res = response.data;
                if (res.code === 200) {
                    // 注销成功跳转至登录注册页
                    window.location.href = '/';
                }
            }).catch((err) => {
                alert(`出现异常：${err}`);
            });
        }

        // 保存当前说说的id
        let currentMsgId = '';
        function sayComment(msgId) {
            currentMsgId = msgId;
        }
        // 发布说说
        function say() {
            axios({
                method: 'post',
                url: '/say',
                data: {
                    sayMsg: $('#sayMsg').val()
                }
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    // 根据服务返回的信息，拿到说说的信息，借助模板引擎，渲染这一段dom
                    let data = JSON.parse(res.data);
                    // 发布成功之后清空文本框
                    $('#sayMsg').val('');
                    let html = `
                <div class="card border-primary shadow" style="width: 50rem; background:rgba(232, 232, 2410, 0.3)">
                    <div class="card-header">
                        <div class="row">
                            <div class="media">
                                <img src="../static/images/64.jpg" class="align-self-start mr-3" alt="好像图片加载不出来噢">
                                <div class="media-body">
                                    <h5 class="mt-0">{{username}}</h5>
                                    <p class="msgCon">${data.content}</p>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#comment"
                            onclick="sayComment(${data.id})">评论</button>
                            <img src="../static/images/alarm.svg" alt="time:">
                            <cite title="Source Title">${data.createtime}</cite>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="${data.id}"></ul>
                    `;
                    // 将渲染好的这段dom，插入到指定id节点的内部最前面
                    $("#saysaymsg").prepend(html);
                }
            }).catch(err => {
                alert(`发布说说：${err}`);
            });
        }

        // 评论一下
        function comment() {
            axios({
                method: 'post',
                url: '/comment',
                data: {
                    commentMsg: $('#commentMsg').val(),
                    msgId: currentMsgId
                },
            }).then(function (response) {
                let res = response.data;
                if (res.code === 200) {
                    // 获得评论信息，渲染指定的dom片段
                    let data = JSON.parse(res.data);
                    //评论成功之后清空文本框
                    $('#commentMsg').val('');
                    let html = `
                    <div class="media list-group-item" style="background: rgba(240, 227, 240, 0.2);">
                        <div class="media-body">
                            <h5 class="mt-0">${data.fromUserName}：</h5>
                            <p class="msgCon">${data.content}</p>
                        </div>
                        <footer class="blockquote-footer" style="color: #212529; float: right;">
                            <cite title="Source Title">${data.createtime}</cite>
                        </footer>
                    </div>
                    `;
                    // 将渲染好的dom片段，插入到指定id节点的最后面
                    $("#" + data.msgId).append(html);
                } else {
                    alert('错误响应！')
                }
            }).catch(err => {
                alert(`评论说说：${err}`);
            });
        }
    </script>
</body>

</html>